<template>
  <div>
    <!-- 表单 -->
    <el-form label-position="left" size="small" :inline="true">
      <el-form-item label="计划名称" style="font-weight:bold;">
        <el-input v-model="queryParams.userName" placeholder="请输入计划名称" style="width:180px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="人员姓名" style="font-weight:bold;">
        <el-input v-model="queryParams.userName" placeholder="请输入人员姓名" style="width:180px;" clearable></el-input>
      </el-form-item>
      <el-button size="small" class="search_botton" type="primary" icon="el-icon-search">查询</el-button>
      <el-button size="small" class="reset_botton" icon="el-icon-refresh">重置</el-button>
    </el-form>
    <!-- 表单 -->
    <el-button plain class="addBtn" size="mini" type="success" icon="el-icon-folder-add"
      @click="addPaly">新增巡更计划</el-button>
    <!-- 表格 -->
    <el-table size="medium" :data="tableData" border style="width: 100%;margin-top:20px;">
      <el-table-column prop="num" label="序号" align="center" min-width="100"></el-table-column>
      <el-table-column prop="" label="巡更点名称" align="center" min-width="100"></el-table-column>
      <el-table-column prop="" label="计划名称" align="center" min-width="100"></el-table-column>
      <el-table-column prop="" label="开始时间" align="center"></el-table-column>
      <el-table-column prop="" label="结束时间" align="center"></el-table-column>
      <el-table-column prop="" label="人员" align="center"></el-table-column>
      <el-table-column prop="" label="工作日" align="center"></el-table-column>
      <el-table-column prop="" label="操作" align="center" width="220">
        <template>
          <template slot-scope="">
            <el-button size="mini" type="primary" plain @click="changePaly">编辑</el-button>
            <el-button size="mini" type="danger" plain>删除</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 -->
    <el-dialog :title="title" :visible.sync="showDialog" width="50%" center>
      <el-form label-position="right" size="small" :model="form" label-width="200px">
        <el-form-item label="巡更点名称" style="font-weight:bold;">
          <el-select placeholder="请选择巡更点" v-model="form.name" clearable style="width:400px;">
            <el-option label="1" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划名称" style="font-weight:bold;">
          <el-input v-model="form.userName" placeholder="请输入计划名称" style="width:400px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="开始时间" style="font-weight:bold;">
          <el-time-picker v-model="form.value" placeholder="选择时间" value-format="HH:mm:ss" style="width:400px;">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="结束时间" style="font-weight:bold;">
          <el-time-picker v-model="form.value" placeholder="选择时间" value-format="HH:mm:ss" style="width:400px;">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="巡更人员" style="font-weight:bold;">
          <el-select placeholder="请选择巡更人员" v-model="form.name" clearable style="width:400px;">
            <el-option label="1" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作日" style="font-weight:bold;">
          <el-checkbox-group v-model="form.type" style="width:400px;">
            <el-checkbox label="星期一" name="type"></el-checkbox>
            <el-checkbox label="星期二" name="type"></el-checkbox>
            <el-checkbox label="星期三" name="type"></el-checkbox>
            <el-checkbox label="星期四" name="type"></el-checkbox>
            <el-checkbox label="星期五" name="type"></el-checkbox>
            <el-checkbox label="星期六" name="type"></el-checkbox>
            <el-checkbox label="星期日" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button type="primary" @click="test">{{ confirm }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      confirm: "",
      showDialog: false,
      queryParams: {},
      form: {
        type: [],
      },
      tableData: [{ num: 1, }]
    }
  },
  methods: {
    test() {
      console.log(this.form.value);
    },
    addPaly() {
      this.showDialog = true
      this.title = "新增巡更计划"
      this.confirm = "确认新增"
    },
    changePaly() {
      this.showDialog = true
      this.title = "修改巡更计划"
      this.confirm = "确认修改"
    }
  }

}
</script>

<style lang="scss" scoped></style>